<template>
  <div class="page">
    <headerbar>{{title}}
       <span v-if="role" @click="add()" class="head-btn" slot="btn"><strong>+</strong>创建</span>
    </headerbar>
    <section class="">
      <div v-if="tabIndex==0" id="partake" class="mui-active">
        <div class="d-scroll list-text" style="">
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
          >
            <ul class="tab">
                <li @click="loadPartakeData()" :class="{'active':tabIndex==0}"><span>所有</span></li>
                <li @click="loadLaunchData()" :class="{'active':tabIndex==1}"><span>发起</span></li>
            </ul>
            <div class="select-box">
              <div class="state-box">
                <select
                  name="select"
                  class="select"
                  v-model="selectChange"
                >
                  <option value="">状态</option>
                  <option value="0">未读</option>
                  <option value="1">已读</option>
                </select>
                <img src="../../../../static/images/arrow_down.png" alt="" />
              </div>
              <div class="btn-box">
                <input
                  class="select-btn"
                  type="text"
                  v-model="inputTitle"
                  placeholder="请输入关键词搜索"
                />
                <img src="../../../../static/images/select.png" alt="" />
              </div>
              <span>搜索</span>
            </div>
            <cube-swipe>
              <fetchData v-if="isLoading" :loading="isLoading" :data="swipeData"></fetchData>
              <transition-group name="swipe" tag="div">
                <div class="" v-for="(data,index) in swipeData" :key="data.id">
                  <cube-swipe-item
                    ref="swipeItem"
                    :index="index">
                    <div @click="goDetail(data)" class="item">
                      <div class="name"><span>主题：</span>{{data.theme}} <span class="self" v-if="data.hoster==userInfo.nickname">本人</span></div>
                      <div><span>开始时间：</span>{{data.startTime}}</div>
                      <div><span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：</span>{{data.address}}</div>
                      <div><span>发&nbsp;&nbsp;起&nbsp;&nbsp;人：</span>{{data.hoster}}</div>
                      <div>
                        <span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                        <span :class="fontColor(data)">{{data.statusName}}</span>
                        <span class="bottomSpan status">查看详情 >></span>
                      </div>
                    </div>
                  </cube-swipe-item>
                </div>
              </transition-group>
            </cube-swipe>
            <div class="text-center no-data" v-if="!isLoading && swipeData.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </div>
      </div>
      <div v-if="tabIndex==1" id="launch" class="mui-active">
        <div class="d-scroll list-text" style="">
        <cube-scroll
          ref="scroll"
          :options="launchOptions"
          @pulling-up="launchOnPullingUp"
        >
          <ul class="tab">
            <li @click="loadPartakeData()" :class="{'active':tabIndex==0}"><span>所有</span></li>
            <li @click="loadLaunchData()" :class="{'active':tabIndex==1}"><span>发起</span></li>
          </ul>
          <div class="select-box">
            <div class="state-box">
              <select
                name="select"
                class="select"
                v-model="selectChange"
              >
                <option value="">状态</option>
                <option value="0">未读</option>
                <option value="1">已读</option>
              </select>
              <img src="../../../../static/images/arrow_down.png" alt="" />
            </div>
            <div class="btn-box">
              <input
                class="select-btn"
                type="text"
                v-model="inputTitle"
                placeholder="请输入关键词搜索"
              />
              <img src="../../../../static/images/select.png" alt="" />
            </div>
            <span>搜索</span>
          </div>
          <cube-swipe>
            <fetchData v-if="isLoading" :loading="isLoading" :data="launchSwipeData"></fetchData>
            <transition-group name="swipe" tag="div">
              <div class="" v-for="(data,index) in launchSwipeData" :key="data.id">
                <cube-swipe-item
                  ref="swipeItem"
                  @btn-click="action"
                  :index="index">
                  <!-- <div @click="goDetail(data)" class="item live-msg-wrap">
                    <div class="name"><span>主题：</span>{{data.theme}} <span class="status" :class="fontColor(data)">{{data.statusName}}
                      <span v-if="data.statusName!='已取消' && data.status==='0'" class="right pdl-3 color-red" @click.stop="cancel(data)"><i class="pdh-2"></i> <span class="btn-text">取消</span></span></span></div>
                    <div><span>开始时间：</span>{{data.startTime}}</div>
                    <div><span>地点：</span>{{data.address}}</div>
                    <div class="card-foot" v-if="data.status!==3">
                      <p class="text"></p>

                    </div>
                  </div> -->
                  <div @click="goDetail(data)" class="item">
                    <div class="name"><span>主题：</span>{{data.theme}} <span class="self" v-if="data.hoster==userInfo.nickname">本人</span></div>
                    <div><span>开始时间：</span>{{data.startTime}}</div>
                    <div><span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：</span>{{data.address}}</div>
                    <div><span>发&nbsp;&nbsp;起&nbsp;&nbsp;人：</span>{{data.hoster}}</div>
                    <div>
                      <span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                      <span :class="fontColor(data)">{{data.statusName}}</span>
                      <span class="bottomSpan status">查看详情 >></span>
                    </div>
                  </div>
                </cube-swipe-item>
              </div>
            </transition-group>
          </cube-swipe>
          <div class="text-center no-data" v-if="!isLoading && launchSwipeData.length===0">
            <img src="../../../../static/images/no_data.png" alt="">
            <p>暂无数据</p>
          </div>
          <onBottom v-else-if="onBottom"></onBottom>
          <p class="pdv-10"></p>
          <p class="pdv-3"></p>
          <!--<div v-if="role && getRole()" @click="add()" class="default-block-btn mgh-10">发起{{title}}</div>-->
        </cube-scroll>
        <!-- <section v-if="role" class="foot-action">
            <div @click="add()" class="default-block-btn mgh-10">发起{{title}}</div>
        </section> -->
        </div>
      </div>

    </section>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  export default {
    name: '',
    data () {
      return {
        userInfo: {},
        inputTitle: "",
        selectChange: "",
        isLoading: true,
        onBottom: false,
        fn: tools,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        launchOptions: {
          pullUpLoad: true,
          scrollbar: false
        },
        objectsName: '',
        swipeData: [],
        launchSwipeData: [],
        permission: false,
        infinite: true,
        pageIndex: 1,
        launchPageIndex: 1,
        tabIndex: 0,
        fromType: '',
        subType: '',
        title: '',
        role: true,
        roleData: '',
        showTypes: '1'
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      this.isPrem()
      this.fromType = this.$route.params.type
      if (this.fromType === 'shyk') {
        this.title = '三会一课'
      } else if (this.fromType === 'ztdr') {
        this.title = '主题党日'
      } else if (this.fromType === 'mzpy') {
        this.title = '民主评议(组织生活会)'
      }
      this.loadPartakeData()
    },
    methods: {
      goDetail (data) {
        this.$router.push({path: `/sanhuiyikeDetail/${data.id}`})
      },
      fontColor (status) {
        let colorName = {
          '未签到': 'color-red',
          '未开始': 'color-tip',
          '请假': 'color-green',
          '已参与': 'color-green',
          '已结束': 'color-tip',
          '未参加': 'color-red'
        }
        console.log(colorName[status.statusName])
        return colorName[status.statusName]
      },
      loadPartakeData () {
        this.options.pullUpLoad = true;
        this.onBottom = false;
        this.isLoading = true;
        this.tabIndex = 0
        let data = {
          pageNo: this.pageIndex + '',
          loginId: '3750',
          type: this.fromType,
          subType: this.subType,
          pageSize: '20'
        }
        loginService.participateList(data).then((res) => {
          this.isLoading = false
          if (res.code !== 0) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
            return tools.tip(res.message)
          }
           if (res.code === 0 && res.data.length < 1) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            this.onBottom = true;
            this.options.pullUpLoad = false;
            return;
          }
          this.pageIndex ++
          this.swipeData = this.swipeData.concat(res.data)
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          }, 100)
        })
      },
      loadLaunchData () {
        this.launchOptions.pullUpLoad = true;
        this.onBottom = false;
        this.isLoading = true;
        if (!this.role) {
          return tools.alert('无权限')
        }
        this.tabIndex = 1
        let data = {
          pageNo: this.launchPageIndex + '',
          loginId: '3750',
          type: this.fromType,
          subType: this.subType,
          pageSize: '20'
        }
        loginService.initiateList(data).then((res) => {

          if (res.code !== 0) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
            return tools.tip(res.message)
          }
          if (res.code === 0 && res.data.length < 1) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            this.onBottom = true;
            this.launchOptions.pullUpLoad = false;
            return;
          }
          this.launchPageIndex ++
          /*res.data.forEach(v => {
            if (parseInt(v.status) === 3) {
              v.btns = [{
                action: 'deleteItem',
                text: '删除',
                color: '#ec5563'
              }]
            }
            this.launchSwipeData.push(v)
          })*/
          this.isLoading = false
          this.launchSwipeData = this.launchSwipeData.concat(res.data)
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          }, 100)
        })
      },
      action (btn, index) {
        let item = this.launchSwipeData[index]
        this[btn.action](item, index)
      },
      deleteItem (item, index) {
        let params = {
          loginId: this.tools.getUserInfo().id,
          spaceId: item.id
        }
        this.tools.showLoading()
        this.fetchService.saveSpaceInfoDelSpaceInfo(params).then(res => {
          this.tools.hideLoading()
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          this.launchSwipeData.splice(index, 1)
          this.tools.tip('删除成功')
        })
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadPartakeData()
      },
      launchOnPullingUp () {
        console.log('launchOnPullingUp')
        this.loadLaunchData()
      },
      add () {
        this.$store.state.OrgLifeAddflagType = true
        this.$store.state.scheduleTypeSelected = []
        this.$store.state['checkedListattendUserName'] = []
        this.$store.state['checkedListcompereUserName'] = []
        this.$store.state['checkedListrecordEUserName'] = []
        delete this.$store.state.organizationalLifeAddData;
        delete this.$store.state.scheduleTypeSelected;
        this.showTypes = '1'
        // this.$router.push({path: `/organizationalLifeAdd/${this.fromType}/${this.title}/${this.showTypes}`})
        this.$router.push({path: `/organizationalLifeAdd/add/${this.fromType}/${this.title}/${this.showTypes}`})
      },
      orgLifeUpdateUndo (data) {
        let params = {
          loginId: this.tools.getUserInfo().id,
          orgLifeId: data.id
        }
        this.tools.showLoading()
        this.fetchService.orgLifeUpdateUndo(params).then(res => {
          this.tools.hideLoading()
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          this.tools.tip('操作成功')
          this.launchPageIndex = '1'
          this.launchSwipeData = []
          this.loadLaunchData()
        })
      },
      cancel (data) {
        let me = this
        this.$createDialog({
          type: 'confirm',
          icon: '',
          title: '温馨提示',
          content: '确认取消？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            me.orgLifeUpdateUndo(data)
          },
          onCancel: () => {
          }
        }).show()
      },
      isPrem () {
        let data = {
          loginId: "3750"
        }
        loginService.prem(data).then((res) => {
          if (res.code === 0) {
            this.role = true
          } else {
            this.role = false
          }
        })
      },
      getRole () {
        if (this.roleData === 'zzsh') {
          this.showTypes = '1'
          return true
        } else if (this.roleData === 'dxz') {
          if (this.fromType === 'shyk') {
            this.showTypes = '2'
            return true
          } else {
            return false
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .tab {
    margin-bottom: 0;
  }
  .list-text .item {
    font-size: $defaultFontSize;
    margin:pxToRem(20px) pxToRem(20px) pxToRem(10px);
    background:rgba(255,255,255,1);
    box-shadow:0px pxToRem(5px) pxToRem(20px) 0px rgba(0,0,59,0.1);
    border-radius:pxToRem(20px);
    padding:pxToRem(20px);
    .name {
      font-weight:bolder;
      padding-bottom:10px;
    }
    span {
      font-weight:inherit;
      font-size: inherit;
    }
    .self {
      position: absolute;
      right: pxToRem(20px);
      color: #fff;
      width: 71px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      background: #2464B2;
      border-radius: 19px 0px 0px 19px;
      font-size: 12PX;
      font-weight: 400;
    }
  }
  .live-msg-wrap {
    .card-foot {
      font-size: $titleFontSize;
      padding-right:0;
      padding-bottom:0;
      .btn-text {
        white-space: nowrap;
        border-radius:pxToRem(10px);
        line-height:pxToRem(44px);
        padding: 0 pxToRem(10px);
        font-weight:400;
        text-align: center;
        border:1px solid $theme-color;
      }
    }
  }
  .select-box {
  width: 100%;
  height: 90px;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 2%;
  .state-box {
    position: relative;
    img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 16px;
      width: 20px;
    }
    .select {
      width: 128px;
      height: 50px;
      line-height: 50px !important;
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      background: #ffffff;
      border: 1px solid #9a9a9a !important;
      border-radius: 10px;
    }
  }

  .btn-box {
    position: relative;
    width: 60%;
    .select-btn {
      width: 100%;
      height: 50px;
      background: #ffffff;
      border: 1px solid #9a9a9a;
      border-radius: 10px;
      margin-bottom: 0;
      padding: 10px 10px 10px 50px;
    }
    img {
      position: absolute;
      width: 25px;
      top: 50%;
      transform: translateY(-50%);
      left: 15px;
    }
  }

  span {
    font-size: 14PX;
    color: #e20002;
  }
}
</style>
